import React, {createContext, useContext, useState} from 'react';
import './contextLol.css'

function A() {

    return (
        <div className={"kua-zu-jian a"}>
            我是a
            <B></B>
        </div>
    );
}

function B() {
    const My = useContext(MyContext)
    return (
        <div className={"kua-zu-jian b"}>
            我是b
            接收最高组件参数：{My.name}-{My.age}
            <C></C>
        </div>
    );
}

function C() {
    return (
        <div className={"kua-zu-jian c"}>
            我是b
            {/*定制需求者*/}
            <MyContext.Consumer>
                {(value) => {
                    return `${value.name}-${value.age}`
                }}
            </MyContext.Consumer>


        </div>
    );
}

const MyContext = createContext({
    name: '小明',
    age: 18
}) //创建Context

function ContextLol() {
    const [useInfo, setUseInfo] = useState({
        age: 18,
        name: '小明'
    })

    function add() {
        setUseInfo(n => {
            return {...n, age: n.age + 1}
        })
    }

    return (
        <div className={"kua-zu-jian"}>
            我是最高组件 {useInfo.name}-{useInfo.age}
            <button onClick={add}>加</button>
            {/*指定这里的组件可以使用Context*/}
            <MyContext.Provider value={useInfo}>
                <A></A>
            </MyContext.Provider>
        </div>
    );
}

export default ContextLol;